<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"
      xmlns:v-bind="http://www.w3.org/1999/xhtml">
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>商家管理后台</title>
    <link rel="stylesheet" th:href="@{/css/layui/css/layui.css}"  />
    <link rel="stylesheet" th:href="@{/css/login.css}"  />
    <link rel="stylesheet" th:href="@{/css/layui/icon/iconfont.css}">
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/css/viewer.css}">
</head>
<body style="width: 100%">
<table class="table" id="codes">
    <caption>
        <button class="btn btn-info" data-toggle="modal" data-target="#addCodes">生成二维码</button>
    </caption>
    <thead>
        <tr>
            <th>序号</th>
            <th>二维码路径</th>
            <th>生成时间</th>
            <th>桌号</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr  v-if="code == null">
            <td colspan="5"> 暂无数据 </td>
        </tr>
        <tr v-else-if="code.length <= 0">
            <td colspan="5"> 暂无数据 </td>
        </tr>
        <tr  v-for="(c, index) in code">
            <td>{{index + 1}}</td>
            <td><img  v-bind:src="'http://localhost:8080/fileEcho?path='+c.id" id="images" width="50px" height="50px"></td>
            <td>{{c.q_time}}</td>
            <td>{{c.t_num}}</td>
            <td>
                <input class="hidden" v-model="c.id">
                <button class="btn btn-danger" v-on:click="deleteCode(c.id)" >删除</button>
                <a class="btn btn-info" :href="'http://localhost:8080/downCode?id='+c.id" >下载</a>
            </td>
        </tr>
    </tbody>
</table>

<div class="modal fade" id="addCodes" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" id="addCode_v">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">生成二维码</h4>
            </div>
            <div class="modal-body">
                <label>桌号:</label>
                <input type="number" class="form-control t_num" placeholder="桌号"/>
                <img id="previewImage">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" v-on:click="addCode()">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/viewer.min.js}"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
    // $(function () {
    //
    //     // 上传后预览
    //     $(".t_file").on("change",function (evt) {
    //         // 如果浏览器不支持FileReader，则不处理
    //         if (!window.FileReader) return;
    //         var files = evt.target.files;
    //         for (var i = 0, f; f = files[i]; i++) {
    //
    //             if (!f.type.match('image.*')) {
    //                 continue;
    //             }
    //             var reader = new FileReader();
    //
    //             reader.onload = (function (theFile) {
    //
    //                 return function (e) {
    //                     console.log(e.target.result);
    //                     // img 元素
    //                     document.getElementById('previewImage').src = e.target.result;
    //                 };
    //
    //             })(f);
    //             reader.readAsDataURL(f);
    //         }
    //     });
    //
    // });
    $(function () {
        $("#viewer").viewer();
    });

    var searchCodes = new Vue({
        el: "#codes",
        data: {
            code: null
        },
        mounted() {
            var codes = this;
            codes.searchCode();
        },
        methods: {
            searchCode: function () {
                var code = this;
                $.ajax({
                    url: "/getCode",
                    type: "POST",
                    contentType: 'application/json',
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        if (data.code == 0) {
                            code.code = data.message;
                        }
                    }
                });
            },
            deleteCode: function (event) {
                var code = this;
                var id = event;
                $.ajax({
                    url: "/deleteCode",
                    type: "POST",
                    data: JSON.stringify({"id": id}),
                    contentType: 'application/json',
                    dataType: "json",
                    success: function (data) {
                        if (data.code == 0) {
                            code.searchCode();
                        }
                    }
                });
            }
        }
    });
    var addCodes = new Vue({
        el: "#addCode_v",
        data: {
            codes: null
        },
        mounted() { //页面加载后执行
            var codes = this;
        },
        methods:{
            addCode: function () {
                var t_num = $('.t_num').val();
                if(t_num == "" || t_num == null){
                    alert("桌号不能为空");
                    return;
                }
                $.ajax({
                    url: "/addCode",
                    type: "POST",
                    data: JSON.stringify({"t": t_num}),
                    contentType: 'application/json',
                    dataType: "json",
                    success: function (data) {
                        console.log(data);
                        if (data.code == 0) {
                            $('#addCodes').modal('hide');
                            searchCodes.searchCode();
                        }
                    }
                });
            }
        }
    });
</script>
</body>
</html>